<template>
	<view class="content" v-if="dataInfo">
		<view class="tit">
			{{ title }}
		</view>
		<block v-if="dataInfo.article_type == 1">
			<video class="video" :poster="$getImageURL(dataInfo.image)" :src="$getImageURL(dataInfo.video)" />
		</block>
		
		<block v-else>
			<view class="media images flex" v-if="images.length > 0">
				<image v-for="item in images" :key="item" :src="cdnurl + item"></image>
			</view>
		</block>
	</view>
</template>

<script>
import config from '@/common/config/config.js'
import { GetArticle } from '@/API/articleNew';
export default {
	name: "publishCommonArticle",
	props: {
		article_id: {
			type: Number,
			default: 0
		},
	},
	data() {
		return {
			cdnurl: config.cdnurl,
			images: [],
			title: '',
			dataInfo: null,
		};
	},
	methods: {
		async getDetail() {
			const res = await GetArticle({ article_id: this.article_id});
			this.dataInfo = res.data;
			this.title = res.data.title;
			this.images = res.data.images;
		},
	},
	mounted(){
		this.getDetail();
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 700rpx;
	background-color: white;
	border-radius: 16rpx;
	overflow: hidden;
	padding-bottom: 20rpx;

	.tit {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		padding: 20rpx 20rpx 0;
		margin-bottom: 20rpx;
	}

	.media {
		position: relative;
		flex-wrap: wrap;

		.videoTime {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}

		image {
			width: 100%;
		}

		&.images {
			display: flex;
			// justify-content: space-between;
			gap: 20rpx;

			image {
				width: 224rpx;
				height: 224rpx;
			}
		}
	}
	
	.video {
		width: 300rpx;
		height: 300rpx;
		margin-left: 20rpx;
	}

}
</style>
